<template>
	<page-meta :page-style="show ? 'overflow: hidden; touch-action: none;' : ''">
	</page-meta>
	<view class="container">
		<u-popup :show="show" @close="close" mode="bottom" :duration="100" :closeOnClickOverlay="true" round="30rpx">
			<view class="honey-tip-container">
				<!-- 标题 -->
				<view class="title">充值中心</view>

				<view class="colse" @click="close">
					<image src="/static/X.png" mode=""></image>
				</view>

				<view class="header">
					<view class="header-title">
						蜂蜜值余额：
					</view>
					<view class="header-num">
						{{currentHoneySum}}
					</view>
				</view>
				<view class="middle">
					请选择充值金额
				</view>
				<view class="middle-content">
					<view class="honey-options">
						<view v-for="(item, index) in tipList" :key="index" class="honey-item" :class="{ 
				            'selected': selectedOption === index,
				            'second-row-item': tipList.length === 6 && index >= 4 
				          }" @click="selectOption(index,item)">
							<view class="honey-img">
								<text>{{item.title}}蜂蜜</text>
							</view>
							<view class="honey-text">
								<text>{{ item.money }}元</text>
							</view>
						</view>
					</view>
				</view>
				<view class="footer-btn-top">
					<!-- 协议勾选 -->
					<view class="agreement">
						<label class="checkbox-wrapper" @click="toggleCheckbox">
							<view class="custom-checkbox" :class="{ 'checked': selected }">
								<u-icon v-if="selected" name="checkmark" color="#fff" size="12"></u-icon>
							</view>
							<text>我已阅读并同意
								<text class="protocol" @click.stop="onProtocol">《蜂蜜值购买协议》</text>
							</text>
						</label>
					</view>
				</view>
				<view class="footer-btn-wrapper" @click="handleEmit()">
					<view class="footer-btn">
						立即充值
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		honeyPayList,
		payClientUserHoney,
		getHoneySum,
	} from '@/request/api.js';
	export default {
		name: "recharge",
		props: {
			show: {
				type: Boolean,
				default: false,
			},
		},
		watch: {
			show: {
				handler(newVal) {
					if (newVal) {
						// 显示时重置数据
						this.inputValue = '';
						this.selected = false
						this.initPage()
					}
				}
			}
		},
		data() {
			return {
				inputValue: '',
				selected: false,
				tipList: [],
				selectedOption: null, // 添加这行
				selectItem: {},
				currentHoneySum: null
			}
		},
		mounted() {

		},
		methods: {
			initPage() {
				honeyPayList().then(res => {
					console.log(res);
					this.tipList = res.data.rows
				})

				let params = {
					userId: this.$store.state.userInfo.userId,
				}
				getHoneySum(params).then(res => {
					if (res.data.code == 200) {
						this.currentHoneySum = res.data.data | 0
					}
				})
			},
			handleEmit() {
				// 校验是否同意协议
				if (!this.selected) {
					uni.showToast({
						title: '请先阅读并同意协议',
						icon: 'none'
					});
					return;
				}

				// 校验选择的蜂蜜数量
				if (!this.selectItem || !this.selectItem.id) {
				    uni.showToast({
				        title: '请选择充值金额',
				        icon: 'none'
				    });
				    return;
				}

				let params = {
					userId: this.$store.state.userInfo.userId,
					honeyPayId: this.selectItem.id
				}

				payClientUserHoney(params).then(res => {
					if (res.data.code === 200) {
						uni.showToast({
							title: '充值成功',
							icon: 'success'
						});
						// 可以在这里添加成功后的处理逻辑，比如关闭弹窗
						setTimeout(() => {
							this.close();
						}, 1000);
					} else {
						uni.showToast({
							title: res.data.msg || '充值失败',
							icon: 'none'
						});
					}
				}).catch(error => {
					console.error('充值请求失败:', error);
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					});
				});
			},
			close() {
				this.$emit('close');
			},

			// 切换复选框状态
			toggleCheckbox() {
				this.selected = !this.selected;
			},

			selectOption(index, item) {
				this.selectedOption = index;
				this.selectItem = item
			},
		},

	};
</script>

<style lang="scss" scoped>
	.container {
		.honey-tip-container {
			padding: 40rpx 30rpx;
			background: #fff;
			border-radius: 30rpx 30rpx 0 0;
			min-height: 836rpx;
		}

		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			text-align: center;
			margin-bottom: 40rpx;
		}


		.colse {
			width: 80rpx;
			height: 56rpx;
			position: absolute;
			top: 0;
			right: 0;
			z-index: 10;
			background-color: rgba(240, 239, 239, 1);
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 30rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}


		.header {
			width: calc(100vw - 60rpx);
			height: 160rpx;
			background-image: url(/static/index/recharge-backImg.png);
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center;

			.header-title {
				color: rgba(0, 0, 0, 1);
				font-size: 30rpx;
				padding-left: 40rpx;
				padding-top: 36rpx;
				padding-bottom: 10rpx;
			}

			.header-num {
				font-size: 40rpx;
				padding-left: 40rpx;
				color: rgba(0, 0, 0, 1);
			}
		}

		.middle {
			font-size: 30rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 1);
			margin-top: 52rpx;
		}


		.middle-content {
			margin-top: 30rpx;
			padding: 30rpx;
			/* 移除固定的 padding-bottom */

			/* 响应式媒体查询保持不变 */
			@media (max-width: 480px) {
				.honey-options {
					.honey-item {
						width: calc((100% - 40rpx) / 4);
					}
				}
			}

			.honey-options {
				display: flex;
				flex-wrap: wrap;
				gap: 20rpx;

				.honey-item {
					width: calc((100% - 60rpx) / 4);
					height: 180rpx;
					background-color: #fff;
					border: 2rpx solid #eaeaea;
					border-radius: 12rpx;
					display: flex;
					flex-direction: column;
					cursor: pointer;
					transition: all 0.3s ease;
					padding: 0;
					box-sizing: border-box;

					&:active {
						transform: scale(0.95);
						background-color: #f5f5f5;
					}

					&.selected {
						border-color: #ff9900;
						box-shadow: 0 0 10rpx rgba(255, 153, 0, 0.3);
						background-color: rgba(240, 189, 123, 0.3);

						.honey-text {
							width: 100%;
							height: 60rpx;
							line-height: 60rpx;
							font-size: 24rpx;
							color: #fff;
							text-align: center;
							background-color: rgba(255, 149, 58, 1);
							margin-top: 0;
						}
					}

					.honey-img {
						height: 120rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						text {
							color: rgba(0, 0, 0, 1);
							font-size: 30rpx;
							font-weight: bold;
						}
					}

					.honey-text {
						height: 60rpx;
						line-height: 60rpx;
						font-size: 24rpx;
						color: #333;
						text-align: center;
						margin-top: 0;
					}
				}
			}
		}

		.footer-btn-top {
			width: calc(100% - 80rpx);
			position: fixed;
			bottom: 146rpx;
			/* 根据新布局调整位置 */
			left: 50%;
			transform: translate(-50%, -20%);
			text-align: center;
			color: #fff;
			padding: 40rpx;
			// 添加背景色避免内容穿透
			background-color: #fff;
			z-index: 10;

			.agreement {
				display: flex;
				align-items: center;
				justify-content: center;

				.checkbox-wrapper {
					display: flex;
					align-items: center;
					cursor: pointer;
				}

				.custom-checkbox {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					border: 2rpx solid #ccc;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 16rpx;
					background-color: #fff;
					transition: all 0.3s ease;

					&.checked {
						background-color: rgba(255, 179, 39, 1);
						border-color: rgba(255, 179, 39, 1);
					}
				}

				.protocol {
					color: rgba(255, 179, 39, 1);
				}
			}

			.agreement text {
				font-size: 24rpx;
				color: rgba(120, 120, 130, 1);
			}

		}

		/* 底部按钮固定容器 */
		.footer-btn-wrapper {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			justify-content: center;
			padding: 20rpx 0 50rpx;
			background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
			z-index: 10;
			/* 确保在最上层 */

			/* 渐变背景 */

			.footer-btn {
				background-color: rgba(255, 179, 39, 1);
				font-weight: 900;
				font-size: 36rpx;
				line-height: 36rpx;
				padding: 30rpx 36rpx;
				text-align: center;
				width: 400rpx;
				border-radius: 40rpx;
				color: rgba(255, 255, 255, 1);
				box-shadow: 0 8rpx 20rpx rgba(255, 179, 39, 0.3);
			}
		}
	}
</style>